<template>
  <div class="home">
    <!-- 顶部 Logo 和国旗 -->
    <div class="header">
      <div class="logo-container">
        <van-image :src="logoSrc" class="logo-image" />
      </div>
      <div class="flag-container">
        <div class="indonesia-flag2 homesetlang" @click="showLanguagePicker = true">
          <img src="@/assets/images/lang.png" alt="" srcset="" class="lang_image">
          <span>{{ language }}</span>
        </div>
      </div>
    </div>

    <!-- 轮播图部分 -->
    <van-swipe
      class="swiper"
      :autoplay="5000"
      lazy-render
      indicator-color="#D3A548"
    >
      <van-swipe-item v-for="item,id in imgsList" :key="id">
        <div class="swiper-content">
          <img style="width: 100%; height: 100%;" :src="item.banner" alt="">
        </div>
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">
          <div
            v-for="index in total"
            :key="index"
            :class="['indicator-dot', { active: index - 1 === active }]"
          ></div>
        </div>
      </template>
    </van-swipe>

    <!-- 新闻列表 -->
    <div class="news-container">
      <div class="news-title">
        <van-icon name="newspaper-o" class="news-icon" />
        <span> {{ t('newsdetail') }}</span>
      </div>

      <!-- 首次加载显示加载中 -->
      <div v-if="isFirstLoading" class="loading-container">
        <van-loading type="spinner" />
      </div>
      
      <!-- 加载完成后显示列表 -->
      <van-list
        v-else
        v-model:loading="loading"
        :finished="finished"
        :finished-text="t('index_noMoreData')"
        :loading-text="t('index_loading')"
        @load="onLoad"
        :immediate-check="false"
        offset="0"
        class="news-list"
      >
        <div
          v-for="(item, index) in newsList"
          :key="index"
          class="news-item"
          @click="goToNewsDetail(item)"
        >
          <div class="news-content">
            <div class="news-item-title">{{ item.title }}</div>
            <div class="news-date">{{ item.wdate }}</div>
          </div>
          <div class="news-image-container">
            <van-image :src="item.img" class="news-image" fit="cover" />
          </div>
        </div>
      </van-list>
    </div>
    <div class="privacy-policy" @click="goToPrivacy">{{t('index_privacyPolicy')}}</div>
    <van-popup v-model:show="showLanguagePicker" position="bottom">
    <van-picker v-model="languageValues" :columns="languageColumns" @confirm="onLanguageConfirm"
      @cancel="showLanguagePicker = false" />
  </van-popup>
  </div>
</template>

<script setup lang="ts">
import { getBanner, getNewslist } from "@/api";
import { default as logo, default as logoDark } from "@/assets/images/logo_h.png";
import { languageColumns, locale } from '@/utils/i18n';
import type { PickerColumn } from 'vant';
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const logoSrc = computed(() => (isDark.value ? logoDark : logo));
const loading = ref(false);
const finished = ref(false);
const imgsList = ref([])
const newsList = ref([])
const page = ref(1)
const pageSize = 10
const isFirstLoading = ref(true) // 首次加载状态


onMounted(() => {
  getBanner({type:'app'}).then((res)=>{
    imgsList.value = res.data
  })
  loadInitialNews()
});

function goToNewsDetail(item) {
  router.push("/newsdetail?id="+item.id);
}

const showLanguagePicker = ref(false)
const languageValues = ref<Array<string>>([locale.value])
const language = computed(() => languageColumns.find(l => l.value === locale.value).text)

function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
  locale.value = event.selectedOptions[0].value as string
  showLanguagePicker.value = false
  
  page.value = 1
  loadInitialNews()
  getBanner({type:'app'}).then((res)=>{
    imgsList.value = res.data
  })
}
// 初始加载新闻数据
function loadInitialNews() {
  isFirstLoading.value = true
  getNewslist({ page: page.value, pageSize, type: 'news' }).then(res => {
    const list = res.data || []
    newsList.value = list
    if (list.length < pageSize) {
      finished.value = true
    } else {
      page.value++
    }
  }).catch(() => {
    finished.value = true
  }).finally(() => {
    isFirstLoading.value = false
  })
}

// 加载更多新闻数据
function onLoad() {
  if (isFirstLoading.value) {
    loading.value = false
    return
  }
  
  getNewslist({ page: page.value, pageSize, type: 'news' }).then(res => {
    const list = res.data || []
    newsList.value = newsList.value.concat(list)
    if (list.length < pageSize) {
      finished.value = true
    } else {
      page.value++
    }
  }).catch(() => {
    finished.value = true
  }).finally(() => {
    loading.value = false
  })
}

function goToPrivacy() {
  router.push("/privacy");
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  overflow: hidden;
  padding: 5px 20px 0 20px;
  color: #f6eade;
  background: url("../assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-image {
  width: 190px;
  height: 72px;
  margin-left: -20px;
  position: relative;
}

.flag-container {
}

.indonesia-flag {
  width: 30px;
  height: 20px;
  background: linear-gradient(to bottom, #ff0000 50%, #ffffff 50%);
}

.swiper {
  background-color: rgb(243, 244, 246);
  height: 190px;
  border-radius: 6px;
}

.swiper-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #270743 0%, #1a0e33 100%);
}

.custom-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 15px;
  width: 100%;
  gap: 5px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.indicator-dot.active {
  width: 16px;
  background-color: #fff;
  border-radius: 4px;
}

.news-container {
  width: 100%;
  overflow: hidden;
  margin: 20px auto 0 auto;
  background: linear-gradient(
    90deg,
    rgba(254, 242, 230, 0) 4%,
    rgba(254, 237, 221, 0.1) 62%
  );
  border-radius: 10px;
  box-shadow: 0 2px 10px 0 rgba(208, 0, 15, 0.04);
}

.news-title {
  height: 31px;
  overflow: hidden;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: start;
  font-weight: 700;
}

.news-icon {
  font-size: 18px;
  overflow: hidden;
  margin: 0 5px 0 0;
}

.news-list {
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 15px 15px 0 15px;
}

.news-item {
  display: flex;
  padding: 0 0 15px 0;
  margin: 0 0 15px 0;
  border-bottom: 1px solid #333;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  border-bottom: 1px solid rgba(254, 237, 221, 0.1);
}

.news-item:last-child {
  border-bottom: none;
}

.news-image-container {
  margin-left: 25px;
}

.news-image {
  width: 96px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
}

.news-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
}

.news-item-title {
  color: #f6eade;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: calc(3 * 1.4 * 13px); /* 3行 * 行高 * 字体大小 */
}

.news-date {
  color: rgba(246, 234, 222, 0.6);
}
.privacy-policy {
  display: flex;
  justify-content: right;
  width: 100%;
  color: rgba(246, 234, 222, 0.6);
  font-size: 12px;
  margin: 10px 0;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}
.homesetlang{
  display: flex;
  align-items: center;
  gap: 5px;
  .lang_image{
    width: 20px;
    height: 20px;
  }
}
</style>
